<template>
    <div class='container'>
        <el-dialog
            width='800px'
            @closed='previewClose'
            :show-close='true'
            :title="`${preview.sublayerType}文章`"
            :destroy-on-close='true'
            :visible.sync="preview.dialogFormVisible"
        >
            <!-- 新增修改表单内容部分 -->
            <div>
                <h2 class="title">{{preview.row.title}}</h2>
                <span class="tag">{{preview.row.createTime|parseTimeByString}}</span>
                <span class="tag">{{preview.row.username}}</span>
                <span class="tag"><i class="el-icon-view"></i></span>
                <span class="tag">{{preview.row.visits}}</span>
                <div
                    v-html="preview.row.articleBody"
                    class="content"
                ></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        preview: {
            deep: true,
            type: Object,
            require: true
        },
    },
    methods: {
        //dialog关闭回调函数
        previewClose () {
            this.$emit('previewCallback',)
        }
    },

}
</script>

<style scoped lang='less'>
/deep/ .el-dialog__body {
    padding: 20px 20px !important;
}
/deep/ img {
    max-width: 100%;
}
.content {
    margin: 10px 0px;
    border-top: 1px dashed rgba(211, 211, 211, 1);
    background-color: rgba(245, 245, 245, 1);
    padding: 10px 10px 30px;
    box-sizing: content-box;
}
.tag {
    margin: 0px 5px;
}
.title {
    font-weight: 700;
    line-height: 30px;
    font-size: 28px;
    margin: 10px 0px;
}
</style>
